<template>
	<view class="container">
		<fu-navbar :title="title" bgColor="#0f68f0" color="#fff" isBackText></fu-navbar>
		<view class="padding-lr-24">
			<view class="flex align-center justify-between padding-tb-24 fs-28 color-85 border-b-c9">
				<view class="" v-if="info.refRepairBy">{{info.refRepairBy.employeeName}}</view>
				<view class="">{{info.createTime}}</view>
			</view>
			<view class="flex align-center margin-t-24">
				<view class="padding-lr-12 padding-tb-8 fs-28 tag tag1">{{typeName}}</view>
				<view class="padding-lr-12 padding-tb-8 fs-28 tag tag2">{{faultName}}</view>
				<view class="padding-lr-12 padding-tb-8 fs-28 tag tag3">{{reasonName}}</view>
			</view>
			<view class="fs-28 margin-b-12">故障现象描述</view>
			<view class="box fs-28 margin-b-24">
				{{info.faultIntro}}
			</view>
			<view class="fs-28 margin-b-12">解决方法</view>
			<view class="box fs-28 margin-b-24">
				<rich-text :nodes="info.faultSolution"></rich-text>
			</view>
			<view class="fs-28 margin-b-12">适用设备</view>
			<view class="box fs-28 margin-b-24">
				{{info.emName}}
			</view>
			<view class="fs-28 margin-b-12">操作演示</view>
			<view class="flex flex-wrap">
				<image :src="`${read_url}${item.fileUrl}`" class="ys-img" mode="aspectFill" v-for="(item, index) in info.fileList" :key="index"></image>
			</view>
		</view>
		<block v-if="commentList.length > 0">
			<view style="height: 24rpx;background-color: #f2f2f2;"></view>
			<view class="padding-lr-24">
				<view class="fs-30 text-bold pl-title">评论</view>
				<view class="pl-list over-hidden">
					<view class="item" style="margin-bottom: 72rpx;" v-for="(item, index) in commentList" :key="index">
						<view class="flex align-center justify-between border-b-b4 padding-tb-24">
							<view class="flex align-end flex-1 text-ellipsis">
								<image src="../../../static/images/head-img.png" mode="aspectFill" class="head-img"></image>
								<view class="fs-28" v-if="item.refReplyEmployee">{{item.refReplyEmployee.employeeName}}</view>
							</view>
							<view class="flex-shrink fs-24 color-a">{{item.createTime}}</view>
						</view>
						<view class="flex margin-t-24 flex-wrap">
							<!-- <image src="../../../static/images/no-img.png" class="img"></image> -->
						</view>
						<rich-text :nodes="item.commentText"></rich-text>
					</view>
				</view>
			</view>
		</block>
		<view class="to-top" @click="toTop">
			<image src="../../../static/images/top.png" class="img"></image>
		</view>
	</view>
</template>

<script>
	import {READ_FILE_URL} from '@/common/config.js';
export default {
	data() {
		return {
			title: '',
			id: 0,
			info: {},
			commentList: [],
			typeList: [],
			faultList: [],
			reasonList: [],
			faultName: '',
			reasonName: '',
			typeName: '',
			read_url: READ_FILE_URL,
		}
	},
	onLoad(option) {
		this.title = option.title || ''
		this.id = option.id || 0
		this.getDetail();
		this.getCommon();
	},
	methods: {
		toTop() {
			uni.pageScrollTo({
			  scrollTop: 0,
			  duration: 300
			});
		},
		// 查询故障分类
		getType() {
			this.$api.post(global.apiUrls.selectType, {
				dictTypeCode: 'TYPE_REP_MAINTENANCE'
			}).then(res => {
				if (res.data.code == 9100) {
					let data = res.data.info
					data.forEach(item => {
						if (this.info.faultType == item.dictValue) {
							this.typeName = item.dictName
						}
					})
				}
			})
		},
		getReason() {
			this.$api.post(global.apiUrls.selectType, {
				dictTypeCode: 'TYPE_REP_REASON'
			}).then(res => {
				if (res.data.code == 9100) {
					let data = res.data.info
					data.forEach(item => {
						if (this.info.faultReason == item.dictValue) {
							this.reasonName = item.dictName
						}
					})
				}
			})
		},
		getFault() {
			this.$api.post(global.apiUrls.selectType, {
				dictTypeCode: 'TYPE_REP_FAULT'
			}).then(res => {
				if (res.data.code == 9100) {
					let data = res.data.info
					data.forEach(item => {
						if (this.info.faultPho == item.dictValue) {
							this.faultName = item.dictName
						}
					})
				}
			})
		},
		async getDetail() {
			await uni.request({
				url: 'http://150.158.40.124:9001/apiv1/knowledge/base/queryById',
				method: 'POST',
				header: {
					'Content-Type': 'application/json',
					'Authorization': global.token || ''
				},
				data: {
					id: this.id,
					modelCode: 'com.xframe.domain.knowledgeBase.KnowledgeBase',
					queryKey: 'full',
					refList: ['ALL'],
					ver: 'v1'
				},
				success: res => {
					if (res.data.code == 200) {
						let data = res.data.data
						this.info = data
						this.getType();
						this.getFault();
						this.getReason();
					}
					uni.stopPullDownRefresh();
				},
				complete() {
					uni.stopPullDownRefresh();
				}
			})
		},
		dateData(property, bol) { 
		    return (a, b) => {
		        var value1 = a[property];
		        var value2 = b[property];
		        if (bol) {
		            // 升序
		            return Date.parse(value1) - Date.parse(value2);
		        } else {
		            // 降序
		            return Date.parse(value2) - Date.parse(value1)
		        }
		    }
		},
		async getCommon() {
			await uni.request({
				url: 'http://150.158.40.124:9001/apiv1/knowledge/base/queryModelList',
				method: 'POST',
				header: {
					'Content-Type': 'application/json',
					'Authorization': global.token || ''
				},
				data: {
					modelCode: 'com.xframe.domain.knowledgeBase.KnowledgeComments',
					queryKey: 'full',
					ver: 'v1',
					refList: ['ALL'],
					sortDir: 'DESC',
					sortName: 'createTime',
					recordCountFlag: 'true',
					conditions: [
						{
							keyName: 'knId',
							op: 'EQ',
							val: this.id
						}
					]
				},
				success: res => {
					if (res.data.code == 200) {
						let data = res.data.data
						// data.sort(this.dateData('createTime'), true)
						this.commentList = data || []
					}
					uni.stopPullDownRefresh();
				},
				complete() {
					uni.stopPullDownRefresh();
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {}
.to-top {
	width: 88rpx;
	height: 88rpx;
	background-color: rgba(0, 0, 0, 0.45);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	right: 24rpx;
	bottom: 256rpx;
	.img {
		width: 44rpx;
		height: 44rpx;
	}
}
.tag {
	border-radius: 56rpx;
	margin-right: 24rpx;
	margin-bottom: 24rpx;
}
.tag1 {
	color: #009999;
	border: 1rpx solid #009999;
}
.tag2 {
	color: #02a7f0;
	border: 1rpx solid #02a7f0;
}
.tag3 {
	color: #e1374c;
	border: 1rpx solid #e1374c;
}
.box {
	border: 1rpx solid #f2f2f2;
	padding: 20rpx;
}
.ys-img {
	width: 180rpx;
	height: 180rpx;
	border-radius: 10rpx;
	background-color: #eee;
	margin-right: 20rpx;
	margin-bottom: 12rpx;
}
.pl-title {
	position: relative;
	padding: 24rpx 34rpx;
	&::after {
		content: '';
		position: absolute;
		width: 10rpx;
		height: 34rpx;
		background-color: #24649f;
		left: 0;
		bottom: 28rpx;
	}
}
.pl-list {
	.head-img {
		width: 56rpx;
		height: 56rpx;
		margin-right: 12rpx;
	}
	.img {
		width: 200rpx;
		height: 200rpx;
		margin-right: 24rpx;
		margin-bottom: 24rpx;
	}
}
</style>